<template>
  <div style="margin: 20px;">
    <el-breadcrumb separator="/" style="line-height:35px">
      <el-breadcrumb-item><span style="color: #7A7A7A;">护理管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #7A7A7A;">服务项目管理</span></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!--  搜索卡片-->
  <el-card style="margin:20px;border: 0" shadow="never">
    <el-form label-width="80px">
      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item label="项目名称">
            <el-input v-model="service_search_data.proName" placeholder="请输入项目名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="启用状态">
            <el-select placeholder="请输入状态" v-model="service_search_data.status">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label-width="60px">
            <el-button type="primary" @click="selectServicePro()">搜索</el-button>
            <el-button type="info" @click="reset()">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <!--  列表卡片-->
  <el-card style="margin:20px;" shadow="never">
    <el-button type="primary" @click="showAddServicePro()">新增项目</el-button>
    <el-table :data="service_list_data">
      <el-table-column
          header-align="left"
          prop="proId"
          label="项目编号"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          prop="proName"
          label="项目名称"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          prop="proImg"
          label="项目图片"
      >
        <template #default="scope">
          <div style="width: 100px;height:90px;display: flex;align-items: center;">
            <el-image fit="fill" :src="`http://localhost:8080${scope.row.proImg}`"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          header-align="left"
          prop="proPrice"
          label="项目金额"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          prop="proTypeName"
          label="项目类别"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          prop="proFreeTypeName"
          label="项目费用类别"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          prop="status"
          label="启用状态"
          :formatter="messageTypeFormat"
      >

      </el-table-column>
      <el-table-column
          header-align="left"
          prop="proRemark"
          label="项目简介"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          label="操作"
      >
        <template #default="scope">
          <el-button link type="primary" @click="editService(scope.row.id)">编辑</el-button>
          <el-button link type="danger" @click="deleteService(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="service_list_data.length"
        style="margin-top: 20px;margin-left: 5px;"
    />
  </el-card>
  <!--  新增和编辑dialog框-->
  <el-dialog :before-close="handleClose" v-model="dialogVisible" style="width: 830px">
    <el-card style="position: relative;width: 800px;margin:20px auto 0 auto;height: auto;border: 0" shadow="never">

      <div style="position: absolute;background-color: #0468FF;width: 6px;
      height: 18px;border-radius: 5px;left: 25px;top: 44px;"></div>
      <div style="font-size: 18px;height: 80px;margin: 20px;">新增项目</div>

      <el-form label-width="140">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目编码">
              <el-input placeholder="请输入" v-model="service_add_data.proId" style="width: 230px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称">
              <el-input placeholder="请输入" v-model="service_add_data.proName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 25px;">
          <el-col :span="12">
            <el-form-item label="项目金额">
              <el-input placeholder="请输入" v-model="service_add_data.proPrice" style="width: 230px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目类别">
              <el-select v-model="service_add_data.proTypeId">
                <el-option
                    v-for="item in pro_type_data"
                    :value="item.id"
                    :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 25px;">
          <el-col :span="12">
            <el-form-item label="费用种类">
              <el-select v-model="service_add_data.proFreeTypeId">
                <el-option
                    v-for="item in pro_free_type_data"
                    :value="item.id"
                    :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="启用状态">
              <el-select v-model="service_add_data.status">
                <el-option value="1">启用</el-option>
                <el-option value="0">禁用</el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 25px;">
          <el-col :span="24">
            <el-form-item label="项目简介">
              <el-input v-model="service_add_data.proRemark" placeholder="请输入" type="textarea"
                        style="width: 400px;"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row style="margin-left: 25px;">
          <el-col :span="24">
            <el-form-item label="项目图片">
              <el-upload
                  class="avatar-uploader"
                  :limit="1"
                  list-type="picture-card"
                  action="http://localhost:8080/v1/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :on-remove="handleRemove"
              >
                <img v-if="imageUrl" :src="`http://localhost:8080/${imageUrl}`" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon"> <Plus/></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <el-row :gutter="10">
        <el-col :span="16"></el-col>
        <el-col :span="8">
          <el-button style="margin-left: 20px;" @click="">重置</el-button>
          <el-button type="primary" @click="addServicePro()">保存</el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
//存储所有服务项目列表数据
const service_list_data = ref([]);
//是否显示新增弹框
const dialogVisible = ref(false)
//搜索框数据
const service_search_data = ref({proName: '', status: undefined})
//新增项目数据
const service_add_data = ref({
  proId: '',
  proName: '',
  proPrice: undefined,
  proTypeId: undefined,
  proFreeTypeId: undefined,
  status: undefined,
  proRemark: '',
  proImg: null
})
//显示所有项目类别
const pro_type_data = ref([])
//显示所有项目费用类别
const pro_free_type_data = ref([])

const imageUrl = ref('')
//查询所有服务项目列表
const selectServicePro = () => {
  let data = qs.stringify(service_search_data.value)
  console.log(data)
  axios.get('http://localhost:8080/v1/nurse/service-pro-list?' + data).then(response => {
    console.log(response.data)
    if (response.data.state == 2000) {
      service_list_data.value = response.data.data;
    }
  })
}
// 显示新增
const showAddServicePro = () => {
  dialogVisible.value = true;
  //查询所有项目类别
  axios.get('http://localhost:8080/v1/nurse/select-pro-type').then((response) => {
    // console.log(response.data)
    pro_type_data.value = response.data.data
  })
  //查询所有项目费用类别
  axios.get('http://localhost:8080/v1/nurse/select-pro-free-type').then((response) => {
    // console.log(response.data)
    pro_free_type_data.value = response.data.data
  })
}
//新增
const addServicePro = () => {
  let data = qs.stringify(service_add_data.value)
  axios.post('http://localhost:8080/v1/nurse/service-pro-add', data).then((response) => {
    // console.log(response.data)
    if (response.data.state == 2000) {
      //成功
      ElMessage.success("新增成功")
    } else {
      ElMessage.error(response.data.msg)
    }
    dialogVisible.value = false
    service_add_data.value = {}
    selectServicePro()
  })
}
//图片上传
const handleAvatarSuccess = (response,file,fileList)=>{
    console.log(response.data)
    service_add_data.value.proImg=response.data
    imageUrl.value=response.data
}
const beforeAvatarUpload = ()=>{

}

const handleRemove = ()=> {

}
//编辑
const editService = (id) => {

}
//删除
const deleteService = (id) => {

}

const handleClose = () => {
  // reset()
  dialogVisible.value = false
}



//绑定时
onMounted(() => {
  selectServicePro();
})
//重置
const reset = () => {
  service_search_data.value.status = undefined
  service_search_data.value.proName = ''
}
//启用状态格式化
const messageTypeFormat = (row, column) => {
  if (row.status == 0) {
    return '禁用'
  } else {
    return '启用'
  }
}
const currentPage = ref(1)       // 当前页码
const pageSize = ref(10)         // 每页条数
// 每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  // updateCurrentData()
}

// 页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  // updateCurrentData()
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-icon .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

</style>
